<template>
  <div id="home">
      <h1 class="home-title">胡兴龙的个人网站首页</h1>
      <div class="home-wrap">
          <div class="home-top home-item">
              <div class="home-top-banner">
                  <home-banner :banners="banners"/>
              </div>
              <div class="home-top-center">
                  <div class="home-top-type">
                      <img :src="spicalColumns[0].imgUrl" :alt="spicalColumns[0].alt" :title="spicalColumns[0].title" class="home-top-img"/>
                      <a :href="'/webpage/types/' + spicalColumns[0].id">{{spicalColumns[0].name}}</a>
                  </div>
                  <div class="home-top-type">
                      <img :src="spicalColumns[1].imgUrl" :alt="spicalColumns[1].alt" :title="spicalColumns[1].title" class="home-top-img"/>
                      <a :href="'/webpage/types/' + spicalColumns[1].id">{{spicalColumns[1].name}}</a>
                  </div>
              </div>
              <div class="home-top-author">
                  <figure>
                      <img :src="authorInfo.imgUrl" :alt="authorInfo.alt" :title="authorInfo.title">
                  </figure>
                  <p>{{authorInfo.name}}</p>
                  <p class="determine-row">{{authorInfo.description}}</p>
              </div>
          </div>
          <div class="home-recmoend home-item">
              <h2>文章推荐</h2>
              <ul class="home-recmoend-items">
                  <li v-for="(item,index) of recommends" :key="index" class="home-recmoend-item">
                      <a :href="'/webpage/articles/' + item.id">
                          <figure>
                              <img :src="item.imgUrl" :alt="item.imgAlt" :title="item.imgTitle">
                          </figure>
                          <div class="home-recmoend-item-content">
                              <h3>{{item.title}}</h3>
                              <p class="determine-row">{{item.textContent}}</p>
                          </div>
                      </a>
                  </li>
              </ul>
          </div>
          <div class="home-latest home-item">
              <h2>最近更新</h2>
              <ul class="home-latest-items">
                  <li v-for="item of latest" :key="item.id" class="home-latest-item">
                      <a :href="'/webpage/articles/' + item.id" class="home-latest-item-content">
                          <figure>
                              <img :src="item.imgUrl" :alt="item.imgAlt" :title="item.imgTitle"/>
                          </figure>
                          <article>
                              <h3>{{item.title}}</h3>
                              <p class="determine-row">{{item.content}}</p>
                          </article>
                      </a>
                  </li>
              </ul>
          </div>
          <div class="home-friendlylinks home-item">
              <h2>网站推荐</h2>
              <ul class="friendlink-items">
                  <li v-for="(item,index) of friendLinks" :key="index" class="friendlink-item">
                      <a :href="item.href" :rel="item.canSpider ? 'friend' : 'nofollow' " target="_blank" class="link-color">{{item.name}}</a>
                  </li>
              </ul>
          </div>
      </div>
  </div>
</template>

<script>
    import '~/assets/index.css';
    export default {
    	components:{
    		HomeBanner:()=>import('~/components/home/HomeBanner'),
	    },
        async asyncData({app}){
	        let result = await app.$getBanners();
	        let banners = result.data;
	        result = await app.$getSpicalColumn();
	        let spicalColumns = result.data;
	        result = await app.$getAuthorInfo();
	        let authorInfo = result.data;
	        result = await app.$getRecommend();
	        let recommends = result.data;
	        result = await app.$getWebPageByTime({num:6});
	        let latest = result.data;
	        result = await app.$getFriendLinks();
	        let friendLinks = result.data;
            result = await app.$getSeoInfo();
            let seoInfo = result.data;
            return {
                banners,
                spicalColumns,
                authorInfo,
                recommends,
                latest,
                friendLinks,
                seoInfo
            };
        },
        data(){
    	    return {
    	    	isLoading:false
            }
        },
        head(){
             return {
                 title:this.seoInfo.title,
                 meta:[
                     {hid:'description',name:'description',content:this.seoInfo.description},
                     {hid:'keywords',name:'keywords',content:this.seoInfo.keywords}
                 ]
             }
         },
        mounted(){
            let targets = document.querySelectorAll('.link-color');
            targets.forEach(item=>{
                item.style.color = '#' + Math.floor(Math.random()*255*255*255).toString(16);
            });
        }
    }
</script>

<style scoped>

</style>
